<template>
  <img
    :src="processedSrc"
    :alt="alt"
    :style="customStyle"
    :class="customClass"
    @error="handleError"
    v-bind="$attrs"
  />
</template>

<script>
import { getImageUrl } from '@/utils/oss-helper';

export default {
  name: 'OssImage',
  props: {
    src: {
      type: String,
      default: ''
    },
    alt: {
      type: String,
      default: '图片'
    },
    fallbackSrc: {
      type: String,
      default: ''
    },
    customStyle: {
      type: Object,
      default: () => ({})
    },
    customClass: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      imgSrc: this.src
    };
  },
  computed: {
    processedSrc() {
      return getImageUrl(this.imgSrc);
    }
  },
  watch: {
    src(newVal) {
      this.imgSrc = newVal;
    }
  },
  methods: {
    handleError() {
      if (this.fallbackSrc) {
        this.imgSrc = this.fallbackSrc;
      }
      this.$emit('error');
    }
  }
};
</script> 